<template>
	<el-card class="summary-card">
		<div class="card-header">
			<span class="icon">{{ icon }}</span>
			<span class="title">{{ title }}</span>
		</div>
		<div class="value">{{ value }}</div>
	</el-card>
</template>

<script setup>
const props = defineProps({
	title: String,
	value: String,
	icon: String
})
</script>

<style scoped>
.summary-card {
	text-align: center;
	padding: 10px;
}

.card-header {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	color: #666;
}

.value {
	font-size: 26px;
	font-weight: bold;
	color: #409EFF;
	margin-top: 8px;
}

.icon {
	font-size: 18px;
}
</style>
